<template>
  <div class="page-cardBagSetting views-container">
    <div class="wlm-table">
      <div class="wlm-dialog-content">
        <el-form
          ref="cardBagSetting"
          size="small"
          label-width="130px"
          class="retail-form"
          label-position="right"
        >
          <!-- 推广 -->
          <el-form-item label="推广">
            <el-button type="primary" @click="sharelink">推广链接</el-button>
          </el-form-item>
          <!-- 推广 end -->
          <!-- 充值渠道 -->
          <el-form-item label="充值渠道">
            <el-radio-group style="width: 360px;" v-model="formFormatData.formData.recharge_app">
              <el-radio label="jing36">36鲸</el-radio>
            </el-radio-group> 
          </el-form-item>
          <!-- 充值渠道 end -->
          <!-- 渠道设置 -->
          <template v-if="formFormatData.formData.engine[formFormatData.formData.recharge_app]"> 
            <!-- appKey -->
            <el-form-item label="appKey">
              <el-input
                style="width: 360px;"
                v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].app_key"
              ></el-input>
            </el-form-item>
            <!-- appKey end -->
            <!-- secret_key -->
            <el-form-item label="secret_key">
              <el-input
                style="width: 360px;"
                v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].secret_key"
              ></el-input>
            </el-form-item>
            <!-- secret_key end -->
            <!-- 优惠券 -->
            <el-form-item label="优惠券选择">
              <el-select
                filterable
                multiple
                v-model="formFormatData.formData.coupon"
                placeholder="请选择优惠券"
                style="width: 360px;"
              >
                <el-option
                  v-for="item in couponList"
                  :key="item.coupon_id"
                  :label="item.name"
                  :value="item.coupon_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 优惠券 end -->
            <!-- 充值方式 -->
            <el-form-item label="充值方式">
              <el-checkbox-group
                v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].recharge_type"
                style="width: 360px;"
              >
                <el-checkbox label="1">快充</el-checkbox>
                <el-checkbox label="2">慢充</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- 充值方式 end -->
            <!-- 快充充值金额 -->
            <el-form-item label="快充充值金额">
              <el-row :gutter="4">
                <el-col style="width: 100px;margin-left: 14px;">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.fifty.is_open"
                  >50</el-checkbox>
                </el-col>
                <el-col style="width: auto">普通价</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.fifty.price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col> 
                <el-col style="width: auto">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.fifty.vip_is_open"
                  >会员价</el-checkbox>
                </el-col>
                <el-col style="width: auto;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.fifty.vip_price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
              <el-row :gutter="4" style="margin-top: 16px;">
                <el-col style="width: 100px;margin-left: 14px;">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.one_hundred.is_open"
                  >100</el-checkbox>
                </el-col>
                <el-col style="width: auto">普通价</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.one_hundred.price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.one_hundred.vip_is_open"
                  >会员价</el-checkbox>
                </el-col>
                <el-col style="width: auto;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.one_hundred.vip_price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
              <el-row :gutter="4" style="margin-top: 16px;">
                <el-col style="width: 100px;margin-left: 14px;">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.two_hundred.is_open"
                  >200</el-checkbox>
                </el-col>
                <el-col style="width: auto">普通价</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.two_hundred.price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.two_hundred.vip_is_open"
                  >会员价</el-checkbox>
                </el-col>
                <el-col style="width: auto;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast.two_hundred.vip_price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
            </el-form-item>
            <!-- 快充充值金额 end -->
            <!-- 慢充充值金额 -->
            <el-form-item label="慢充充值金额">
              <el-row :gutter="4">
                <el-col style="width: 100px;margin-left: 14px;">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.fifty.is_open"
                  >50</el-checkbox>
                </el-col>
                <el-col style="width: auto">普通价</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.fifty.price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col> 
                <el-col style="width: auto">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.fifty.vip_is_open"
                  >会员价</el-checkbox>
                </el-col>
                <el-col style="width: auto;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.fifty.vip_price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
              <el-row :gutter="4" style="margin-top: 16px;">
                <el-col style="width: 100px;margin-left: 14px;">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.one_hundred.is_open"
                  >100</el-checkbox>
                </el-col>
                <el-col style="width: auto">普通价</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.one_hundred.price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.one_hundred.vip_is_open"
                  >会员价</el-checkbox>
                </el-col>
                <el-col style="width: auto;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.one_hundred.vip_price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
              <el-row :gutter="4" style="margin-top: 16px;">
                <el-col style="width: 100px;margin-left: 14px;">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.two_hundred.is_open"
                  >200</el-checkbox>
                </el-col>
                <el-col style="width: auto">普通价</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.two_hundred.price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">
                  <el-checkbox
                    true-label="1"
                    false-label="2"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.two_hundred.vip_is_open"
                  >会员价</el-checkbox>
                </el-col>
                <el-col style="width: auto;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].slow.two_hundred.vip_price"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
            </el-form-item>
            <!-- 慢充充值金额 end -->
            <!-- 是否开启分销 -->
            <el-form-item label="开启分销"> 
              <el-switch
                  v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].dealer_is_open"
                  active-value="1"
                  inactive-value="2"
                ></el-switch>
            </el-form-item>
            <!-- 是否开启分销 end -->
            <!-- 快充分销佣金 -->
            <el-form-item  v-if="formFormatData.formData.engine[formFormatData.formData.recharge_app].dealer_is_open == 1" label="分销佣金">
              <!-- 50元 -->
              <el-row :gutter="4">
                
                <el-col style="width: 100px;margin-left: 14px;">
                  {{formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.fifty.value}}
                </el-col>
                <!-- 一级 -->
                <el-col style="width: auto">一级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.fifty.money_1"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.fifty.vip_money_1"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <!-- 二级 -->
                <el-col style="width: auto">二级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.fifty.money_2"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.fifty.vip_money_2"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <!-- 三级 -->
                <el-col style="width: auto">三级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.fifty.money_3"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.fifty.vip_money_3"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
              <!-- 100元 -->
              <el-row :gutter="4" style="margin-top: 16px;">
                
                <el-col style="width: 100px;margin-left: 14px;">
                  {{formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.one_hundred.value}}
                </el-col>
                <!-- 一级 -->
                <el-col style="width: auto">一级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.one_hundred.money_1"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.one_hundred.vip_money_1"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <!-- 二级 -->
                <el-col style="width: auto">二级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.one_hundred.money_2"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.one_hundred.vip_money_2"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <!-- 三级 -->
                <el-col style="width: auto">三级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.one_hundred.money_3"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.one_hundred.vip_money_3"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>
              <!-- 200元 -->
              <el-row :gutter="4" style="margin-top: 16px;">
                
                <el-col style="width: 100px;margin-left: 14px;">
                  {{formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.two_hundred.value}}
                </el-col>
                <!-- 一级 -->
                <el-col style="width: auto">一级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.two_hundred.money_1"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.two_hundred.vip_money_1"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <!-- 二级 -->
                <el-col style="width: auto">二级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.two_hundred.money_2"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.two_hundred.vip_money_2"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <!-- 三级 -->
                <el-col style="width: auto">三级佣金 普通</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                    v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.two_hundred.money_3"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
                <el-col style="width: auto">会员</el-col>
                <el-col style="width: auto;margin-right: 32px;">
                  <el-input-number
                    style="width: 100px"
                     v-model="formFormatData.formData.engine[formFormatData.formData.recharge_app].fast_dealer.two_hundred.vip_money_3"
                    :controls="false"
                    :min="0"
                    :precision="2"
                  />
                </el-col>
              </el-row>

            </el-form-item>
            <!-- 快充分销佣金 end -->
            <!-- 回调地址 -->
            <el-form-item label="回调地址"> 
              <div class="flex-row">
                <p
                  style="margin:0 10px;"
                  class="pointer"
                  @click="handleClipboard(formFormatData.formData.engine[formFormatData.formData.recharge_app].back_url,$event)"
                >{{formFormatData.formData.engine[formFormatData.formData.recharge_app].back_url}}</p>
                <p class="form-help">点击复制</p>
              </div>
            </el-form-item>
            <!-- 回调地址 end -->
          </template>
          <!-- 渠道设置 -->
          <!-- 顶部幻灯片 -->
          <el-form-item label="顶部幻灯片">
            <choose-files
              ref="chooseSlideImage"
              :config="chooseSlideImageformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：690*300像素</div>
          </el-form-item>
          <!-- 顶部幻灯片 end -->
          <!-- 公告提示 -->
          <el-form-item label="公告提示">
            <el-input
              type="textarea"
              style="width: 360px;"
              v-model="formFormatData.formData.notice_tip"
            ></el-input>
          </el-form-item>
          <!-- 公告提示 end -->
          <!-- 慢充说明 -->
          <el-form-item label="慢充说明">
            <ueditor
              :ueditorChange="msg => ueditorChange(msg,'slow_tip')"
              :ueditorList="ueditorList"
              :bindIndex="1"
              :defaultMsg="formFormatData.formData.slow_tip"
              :config="{ initialFrameWidth: null, initialFrameHeight: 350 }"
            ></ueditor>
          </el-form-item>
          <!-- 慢充说明 end -->
          <!-- 慢充说明 -->
          <el-form-item label="快充说明">
            <ueditor
              :ueditorChange="msg => ueditorChange(msg,'fast_tip')"
              :ueditorList="ueditorList"
              :bindIndex="1"
              :defaultMsg="formFormatData.formData.fast_tip"
              :config="{ initialFrameWidth: null, initialFrameHeight: 350 }"
            ></ueditor>
          </el-form-item>
          <!-- 慢充说明 end -->
          <!-- 分享图片 -->
          <el-form-item label="分享图片">
            <choose-files
              ref="chooseshareImageform"
              :config="chooseshareImageformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：500*400像素</div>
          </el-form-item>
          <!-- 分享图片 end -->
          <!-- 分享标题 -->
          <el-form-item label="分享标题">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入分享标题"
              v-model="formFormatData.formData.share_title"
            ></el-input>
          </el-form-item>
          <!-- 分享标题 end -->
          <!-- 分享文案 -->
          <el-form-item label="分享文案">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入分享文案"
              v-model="formFormatData.formData.share_describe"
            ></el-input>
          </el-form-item>
          <!-- 分享文案 end -->
          <!-- 海报图片 -->
          <el-form-item label="海报图片">
            <choose-files
              ref="choosePoster"
              :config="choosePosterformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：大小2M以下,建议尺寸750×1334px</div>
          </el-form-item>
          <!-- 海报图片 end -->
          <!-- 海报设置 -->
          <el-form-item
            label="海报设置"
            v-if="formFormatData.formData.poster.length > 0"
          >
            <div class="poster-wrap">
              <div
                class="poster-box"
                v-bind:style="{
                  'background-image': `url(${getPath('drag-bg.png')})`,
                }"
              >
                <!-- 背景图 -->
                <div
                  v-for="(item, index) in formFormatData.formData.poster"
                  :key="index"
                  style="position: absolute"
                >
                  <img
                    :src="item.file_path"
                    style="width: 375px; height: 667px; position: relative"
                  />
                </div>
                <div class="poster-img">
                  <!-- 拖动组件 -->
                  <vue-draggable-resizable
                    :w="112"
                    :h="112"
                    :x="x"
                    :y="y"
                    @dragging="onDrag"
                    @resizing="onResize"
                    :parent="true"
                    :resizable="false"
                  >
                    <img
                      src="../../assets/image/11.png"
                      style="width: 110px; height: 110px"
                    />
                  </vue-draggable-resizable>
                  <vue-draggable-resizable
                    :w="50"
                    :h="50"
                    :x="x1"
                    :y="y1"
                    @dragging="onResizedata"
                    @resizing="onResize"
                    :parent="true"
                    :resizable="false"
                  >
                    <img
                      src="../../assets/store/default_avatar.png"
                      style="width: 50px; height: 50px"
                    />
                  </vue-draggable-resizable>
                </div>
                <div class="poster-reset" @click="resetbtn">重置</div>
              </div>
              <div class="poster-buttom">
                <p>海报图设计说明：（设计图宽度为750px时）</p>
                <p>头像（方型）尺寸为 100 * 100px</p>
                <p>二维码（方型）尺寸为 220 * 220px</p>
                <p>小技巧：</p>
                <p>1、把头像拖拽到二维码上面，可以隐藏头像</p>
                <p>
                  2、当头像、二维码拖拽模块出现偏离屏幕、无法拖动等异常情况，可使用“重置”按钮进行复位操作
                </p>
              </div>
            </div>
          </el-form-item>
          <!-- 海报设置 end -->
        </el-form>
      </div>
    </div>
    <!-- footer -->
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="
          formFormatSubmit({})
        " type="primary">保存</el-button>
    </div>
    <!-- footer end -->
    <!-- 推广 -->
    <share-link :config="shareLinkConfig" ref="sharelink">
      <template slot="title">-话费充值</template>
      <template slot="el-form-item">
        <el-form-item label="话费充值小程序路径" v-if="shareLinkConfig.params.qrUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="话费充值公众号链接" v-if="shareLinkConfig.params.linkUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="充值记录公众号链接" v-if="shareLinkConfig.params.linkUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.self_order_h5" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="充值记录链接" v-if="shareLinkConfig.params.self_order">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.self_order" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.url,$event)">复制</el-button>
          </el-input>
        </el-form-item> 
      </template>
    </share-link>
    <!-- 推广 end -->
  </div>
</template>

<script>
import fp from "lodash/fp";
import { getPhoneSetting, savePhoneSetting, phoneSpread } from "@/api/phoneBill";
import { couponList } from "@/api/application";
import ChooseFiles from "@/components/ChooseFiles/index";
import mixins from "@/mixins/mixins";
import ChooseLink from "@/components/ChooseLink/index";
import ShareLink from '@/components/ShareLink/index'
import clipboard from "@/utils/clipboard";
import ueditor from "@/components/Ueditor/index";
export default {
  mixins: [mixins.getters("Form")],
  components: {
    ChooseFiles,
    ueditor,
    ShareLink
  },
  data() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      x1: 0,
      y1: 0,
      // 推广链接的接口数据
      phoneSpreadRes: {},
      // 优惠券列表数据
      couponList: [],
      // 富文本编辑器的一个东西
      ueditorList: [],
      // 海报图
      choosePosterformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display",
        },
        isUnique: true, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "poster",
          model: "img",
        },
      },
      // 顶部幻灯片选择
      chooseSlideImageformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 10,
          isMore: true,
          model: "display"
        },
        isUnique: false, //在图片选择器中是否单选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "slide",
          model: "img"
        }
      },
      // 分享图片
      chooseshareImageformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isUnique: true, //在图片选择器中是否单选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "share_image",
          model: "img"
        }
      },
      formFormatData: {
        key: "cardBagSetting",
        api: {
          editForm: {
            api: getPhoneSetting,
            params: {
              id: this.$route.query.id
            },
            redirect: "id",
            filters: {
              img: {
                bindInit: [
                  "chooseShareImageformConfig",
                  "chooseAdImageformConfig"
                ]
              }
            }
          },
          submitForm: savePhoneSetting
        },
        formData: {
          // 重置渠道id
          recharge_app: "jing36",
          // 渠道设置
          engine: {
            jing36: {
              // 回调地址
              back_url: '',
              // 快充
              fast: {
                // 50元
                fifty: {
                  value: 50,
                  price: 50,
                  vip_price: 50,
                  is_open: false,
                  vip_is_open: false
                },
                // 100元
                one_hundred: {
                  value: 100,
                  price: 100,
                  vip_price: 100,
                  is_open: false,
                  vip_is_open: false
                },
                // 200元
                two_hundred: {
                  value: 200,
                  price: 200,
                  vip_price: 200,
                  is_open: false,
                  vip_is_open: false
                }
              },
              // 慢充
              slow: {
                  // 50元
                  fifty: {
                  value: 50,
                  price: 50,
                  vip_price: 50,
                  is_open: false,
                  vip_is_open: false
                },
                // 100元
                one_hundred: {
                  value: 100,
                  price: 100,
                  vip_price: 100,
                  is_open: false,
                  vip_is_open: false
                },
                // 200元
                two_hundred: {
                  value: 200,
                  price: 200,
                  vip_price: 200,
                  is_open: false,
                  vip_is_open: false
                }
              },
              // 是否开启分销 1:开启，2：关闭
              dealer_is_open: 2
            }
          },
          // 回调地址
          back_url: '',
          fast: {
            fifty: {
              value: 50,
              price: 50,
              vip_price: 50,
              is_open: false,
              vip_is_open: false
            },
            one_hundred: {
              value: 100,
              price: 100,
              vip_price: 100,
              is_open: false,
              vip_is_open: false
            },
            two_hundred: {
              value: 200,
              price: 200,
              vip_price: 200,
              is_open: false,
              vip_is_open: false
            }
          },
          slow: {
              fifty: {
              value: 50,
              price: 50,
              vip_price: 50,
              is_open: false,
              vip_is_open: false
            },
            one_hundred: {
              value: 100,
              price: 100,
              vip_price: 100,
              is_open: false,
              vip_is_open: false
            },
            two_hundred: {
              value: 200,
              price: 200,
              vip_price: 200,
              is_open: false,
              vip_is_open: false
            }
          },
          // 优惠券
          coupon: '',
          // 顶部幻灯片
          slide: '',
          // 通知
          notice_tip: '',
          // 慢充规则
          slow_tip: '',
          // 快充规则
          fast_tip: '',
          // 分享图片
          share_image: [],
          // 分享标题
          share_title: '',
          // 分享文案
          share_describe: '',
          // 海报图
          poster: [],
          // 海报设置-头像
          head_action: [],
          // 海报设置-二维码
          code_action: [],
        }
      },
      shareLinkConfig: {
        current: 'weChatQr',
        params: {
          weChat_short_url:'',
          qrUrl: '',
          linkUrl: '',
          weChatQr: '',
          appQr: '',
          self_order: ''
        }
      },
    };
  },
  computed: {

  },
  created() {
    
    // 请求表单数据
    getPhoneSetting().then(res => {
      const data = fp.get("data.data", res) || {};
      this.x = Number(data.code_action[0]) || 0;
      this.y = Number(data.code_action[1]) || 0;
      this.x1 = Number(data.head_action[0]) || 0;
      this.y1 = Number(data.head_action[1]) || 0;
      this.formFormatData.formData = data;
      this.chooseSlideImageformConfig.initList = data.slide || [];
      this.chooseshareImageformConfig.initList = data.share_image || [];
      this.choosePosterformConfig.initList = data.poster || [];
    });
    this.fetchCouponList();
    this.fetchPhoneSpreadRes() 
  },
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    sharelink() {
      this.$refs.sharelink.toggle() 
    },
    // 请求推广链接数据
    fetchPhoneSpreadRes() {
      phoneSpread().then(res => {
        this.phoneSpreadRes = fp.get("data.data", res);
        const { data: { data: { weChat_qrcode, wxApp_qrcode, weChat_url, wxApp_url,self_order,self_order_h5, url,weChat_short_url} } } = res
        this.shareLinkConfig.params.qrUrl = wxApp_url
        this.shareLinkConfig.params.linkUrl = weChat_url
        this.shareLinkConfig.params.weChatQr = weChat_qrcode
        this.shareLinkConfig.params.appQr = wxApp_qrcode
        this.shareLinkConfig.params.url = url
        this.shareLinkConfig.params.self_order = self_order
        this.shareLinkConfig.params.self_order_h5 = self_order_h5
        this.shareLinkConfig.params.weChat_short_url = weChat_short_url
        this.shareLinkConfig.current = weChat_qrcode ? 'weChatQr' : weChat_qrcode ? 'appQr' : ''
        this.shareLinkConfig = {
          ...this.shareLinkConfig
        }
      });
    },
    // 请求优惠券列表数据
    fetchCouponList() {
      couponList({
        page: 1,
        list_rows: 1000
      }).then(res => {
        this.couponList = fp.get("data.data.data", res);
        console.log("fetchCouponList res", res);
      });
    },
    handleClipboard(text, event) {
      clipboard(text, event);
    },
    ueditorChange(msg, key) {
      console.log("ueditorChange", msg, key);
      this.formFormatData.formData[key] = msg;
    },
    getPath(path) {
      return path.includes("https://") || path.includes("http://")
        ? `${path}`
        : require(`@/assets/custorm_style/${path}`);
    },
    onResize(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag(x, y) {
      console.log("onDrag", x, y);
      //  code_action:[],二维码
      //  head_action:[],头像
      this.x = x || 0;
      this.y = y || 0;
      this.formFormatData.formData.code_action = [this.x, this.y];
    },
    onResizedata(x1, y1) {
      this.x1 = x1 || 0;
      this.y1 = y1 || 0;
      this.formFormatData.formData.head_action = [this.x1, this.y1];
    },
    resetbtn() {
      this.x = 0;
      this.y = 0;
      this.x1 = 0;
      this.y1 = 0;
      this.formFormatData.formData.code_action = [0, 0];
      this.formFormatData.formData.head_action = [0, 0];
    },
  }
};
</script>

<style lang="scss" scoped>
.link-box {
  background: #e8effc;
  border: 0;
  width: 290px;
  height: 28px;
  border-radius: 3px;
  padding-left: 18px;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.update-load {
  $update: 50px;
  display: inline-block;
  cursor: pointer;
  width: $update;
  height: $update;
  background: #fafbff;
  border: 1px dashed #c0ccda;
  color: #a8abb0;
  border-radius: 5px;

  i {
    font-size: 14px;
    color: #8c939d;
    width: $update;
    height: $update;
    line-height: $update;
    text-align: center;
  }

  .el-select-dropdown {
    max-width: 243px;
  }

  .el-select-dropdown__item {
    display: inline-block;
  }

  .el-select-dropdown__item span {
    min-width: 205px;
    display: inline-block;
  }
}
.form-help {
  color: #999;
  line-height: 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
}
.poster-wrap {
  align-items: center;
  display: flex;
  .poster-box {
    position: relative;
    width: 375px;
    height: 667px;
    padding: 102px 22px 115px 23px;
    // background: url(../../assets/image/drag-bg.png) 0px 0px / 100% 100% no-repeat;
    box-sizing: content-box;
    .poster-img {
      position: relative;
      width: 375px;
      height: 667px;
    }
    .poster-reset {
      position: absolute;
      bottom: 22px;
      left: 174px;
      right: 23px;
      text-align: center;
      flex: 0 0 70px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      cursor: pointer;
      border-radius: 50%;
    }
  }
  .poster-buttom {
    padding: 2px 20px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(227, 227, 227);
    margin: 0px 0px 0px 20px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px inset;
  }
  .my-class {
    border: 1px dashed #993322;
  }
  .my-class > :active {
    border: 1px solid #555555;
  }
}
</style>